<template>
  <div>
  <div class="content" v-if="tableData.length!==0">
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="selection"
              width="55">
      </el-table-column>
      <el-table-column
              prop="storeName"
              label="商家名称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="commodityName"
              label="商品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="commodityPrice"
              label="商品价格"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="商品图片">
        　　<template slot-scope="scope">
        　　　　<img :src="'http://localhost:7777/'+scope.row.commodityImg" width="100px" height="100px" class="head_pic"/>
        　　</template>
      </el-table-column>
      <el-table-column
              prop="specs"
              label="商品规格"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column
              prop="createTime"
              label="加入时间"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="success"
                  @click="oneBay(scope.$index,scope.row)">购买</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="banner-pay">
      <span class="placeholder">￥{{totalPrice}}</span><span class="btn-pay" @click="buy">结算</span>
    </div>
  </div>
  <div class="content" v-else>
    <div class="placeholder">购物车里还没有东西哦！快去添加吧~~</div>
  </div>
  <el-dialog
          title="购买列表"
          :visible.sync="dialogVisible">
    <el-table
            :data="multipleSelection"
            height="250"
            border
            style="width: 100%">
      <el-table-column
              prop="storeName"
              label="商家名称"
              width="120">
      </el-table-column>
      <el-table-column
              prop="commodityName"
              label="商品名称"
              width="200">
      </el-table-column>
      <el-table-column
              prop="commodityPrice"
              label="商品价格"
              show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="商品图片">
        　　<template slot-scope="scope">
        　　　　<img :src="'http://localhost:7777/'+scope.row.commodityImg" width="100px" height="100px" class="head_pic"/>
        　　</template>
      </el-table-column>
      <el-table-column
              prop="specs"
              label="商品规格"
              show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="oKBuy">确 定</el-button>
  </span>
  </el-dialog>
  </div>
</template>

<script>
  import Checkbox from '@/widgets/Checkbox'
  import {getToken} from "@/util/auth";
  export default {
    name: 'Cart',
    components: { Checkbox },
    data () {
      return {
        dialogVisible:false,
        totalPrice:0,
        tableData: [],
        userData:'',
        multipleSelection: []
      }
    },
    mounted () {
      this.cartList();
    },
    methods: {
      //单点结算到订单
      oneBay(index,row){
        var data = {
          id:row.id,
          status: 3
        }
        this.$http({
          method:"post",
          url:"/api/pxx-cart/cart/update",
          data: data,
          headers: {'Content-Type': 'application/json'}
        }).then(res =>{
          this.$message({
            type: "success",
            message: "购买成功!"
          });
        });
        const messageDTO = {
          receiveId:row.storeId,
          type:'订单推送',
          msg: '您有一个新的订单!'
        };
        this.$http({
          method:"post",
          url:"/api/pxx-websocket/sendOneWebSocket",
          data: messageDTO,
          headers: {'Content-Type': 'application/json'}
        })
        this.$delete(this.tableData,index)
      },
      //结算
      buy(){
        if (this.multipleSelection.length===0){
          this.$message.error('你还未选择商品!');
          return
        }
        this.dialogVisible = true
      },
      //结算 添加到订单
      oKBuy(){
        var data= this.multipleSelection;
        for (let i = 0; i < data.length; i++) {
          var row = {
            id:data[i].id,
            status: 3
          }
          this.$http({
            method:"post",
            url:"/api/pxx-cart/cart/update",
            data: row,
            headers: {'Content-Type': 'application/json'}
          }).then(res =>{
            this.$message({
              type: "success",
              message: "购买成功!"
            });
          });
          const messageDTO = {
            receiveId:data[i].storeId,
            type:'订单推送',
            msg: '您有一个新的订单!'
          };
          this.$http({
            method:"post",
            url:"/api/pxx-websocket/sendOneWebSocket",
            data: messageDTO,
            headers: {'Content-Type': 'application/json'}
          })
        }
        location.reload();
        this.dialogVisible = false
      },
      //购物车列表
      cartList(){
        this.userData = getToken();
        if (this.userData===undefined){
          this.$message.error('你还未登录!');
          this.$router.push({ path: 'UserInfo'})
          return
        }
        var id = JSON.parse(this.userData).id;
        this.$http({
          method:"get",
          url:"/api/pxx-cart/cart/selectCartList",
          params: {
            createUser: id
          }
        }).then(res =>{
          this.tableData = res.data.data.records
        });
      },
      //删除购物车
      handleDelete(index,row){
        this.$http({
          method:"post",
          url:"/api/pxx-cart/cart/remove",
          params: {
            ids: row.id
          },
        }).then(res =>{
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        });
        this.$delete(this.tableData,index)
      },
      //结算总价
      handleSelectionChange(val) {
        this.multipleSelection = val;
        let list=val
        var price = 0
        if (list.length!==0){
          for (let i = 0; i < list.length; i++) {
            price+=list[i].commodityPrice
          }
        }
        this.totalPrice = price
      }
    }
  }
</script>

<style scoped>
  .noshow{
    display: none;
  }
  .content {
    width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .one-line {
    word-break: break-all;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .checkbox {
    vertical-align: -2px;
  }
  .table-goods {
    width: 100%;
    margin-top: 15px;
    color: #555;
    table-layout: fixed;
    border-collapse: collapse;
    user-select: none;
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(149, 191, 103, .1);
  }
  .table-goods th,
  .table-goods td {
    text-align: left;
    font-size: 16px;
    padding-left: 12px;
  }
  .table-goods th {
    line-height: 52px;
  }
  .table-goods td {
    line-height: 120px;
  }
  .ipt-quantity {
    width: 60px;
    padding-left: 10px;
    line-height: 32px;
    outline: none;
    border: 1px solid #ccc;
  }
  .thumbnail-goods {
    width: 100px;
    vertical-align: middle;
  }
  .btn-text {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
  }
  .banner-pay {
    border-top: 1px solid #ebeef5;
    padding: 15px 5px;
    overflow: hidden;
    text-align: right;
    color: #777;
  }
  .btn-pay {
    display: inline-block;
    width: 120px;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    color: #fff;
    background-color: #95bf47;
    user-select: none;
    transition: background-color .2s linear;
  }
  .placeholder {
    color: #555;
    line-height: 80px;
    font-size: 24px;
  }
</style>
